<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">请选择门店</view>

            <scroll-view scroll-y="true" class="h-[70vh] pt-[10rpx]">
                <view v-for="(item, index) in tenantList" :key="item.id"
                    class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] "
                    :class="{
                        'mb-[var(--top-m)]': tenantList.length - 1 != index, 'text-[var(--primary-color)] !border-[var(--primary-color)]': tenant.filter((ele) => {
                            return ele.id == item.id
                        }).length
                    }" @click="selectEmployee(item)">
                    <view class="flex items-center w-[100%]  py-[10rpx]">
                        <view class="w-[100rpx] h-[100rpx] rounded-[8rpx] relative">
                            <image
                                :src="item.picUrl || 'https://files.meton.vip/2310e2533cff85c0f22420d6b0950a372b769f45ed8a720cfbd9597a5fdd5c42.png'"
                                class="w-[100rpx] h-[100rpx]"></image>
                        </view>
                        <view class="flex-1  flex items-center ml-[20rpx]  box-border py-[30rpx] border-0">
                            <view class="flex-1">
                                <view class="text-[32rpx] text-[#333]">{{ item.name }}（{{
                                    item.id }}）</view>

                            </view>
                        </view>
                    </view>

                </view>
                <view v-if="!tenantList || tenantList && !tenantList.length"
                    class="text-[var(--text-color-light6)] text-[28rpx] text-center">暂无门店</view>

            </scroll-view>
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" @click="confirm">确认</button>
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { getAccountBindTenantList } from '@/app/api/system'



const tenantList = ref<object[]>([])
const show = ref(false)
const tenant = ref<any[]>([])
const emits = defineEmits(['confirm'])

const prop = defineProps({
    isRadio: {
        type: Boolean,
        default: false
    }
})





const open = (employeeStr: any) => {
    show.value = true
    if (!tenantList.value.length) {
        getAccountBindTenantList().then(({ data }) => {

            tenantList.value = data


        }).catch()
    }
    tenant.value = employeeStr

}

const selectEmployee = (data: object) => {

    if (prop.isRadio) {
        tenant.value = []
    }

    if (!tenant.value.filter((ele) => {
        return ele.id == data.id
    }).length) {
        tenant.value.push(data)
    } else {
        tenant.value = tenant.value.filter((ele) => {
            return ele.id != data.id
        });
    }
}


const confirm = () => {
    emits('confirm', tenant.value)
    show.value = false
}

defineExpose({
    open,
    tenantList
})
</script>

<style lang="scss" scoped></style>
